<template>
	<div class="app-container">
		<head-top></head-top>
		<div class="bg-fa of" id="aCoursesList">
			<section class="container mt20">
				<div>
					<ul class="clearfix of com-dynamic-list">
						<li class="c-d-firstli">
							<div class="c-d-l-wrap pr">
								<div class="c-d-l-desc" style="bottom: -45px;">
									<div class="c-d-l-dbox">
										<section class="hLh30 of txtOf">
											<a class="fsize14 c-fff" :title="firstArticle.name" href="javascript:void(0)" @click="routerArticleInfo(firstArticle)">{{firstArticle.name}}</a>
										</section>
									</div>
								</div>
								<a class="c-d-l-pic" href="javascript:void(0)" @click="routerArticleInfo(firstArticle)"> <img :src="domainUrl + firstArticle.image"  alt=""> </a>
							</div>
						</li>
						<li v-for="item in topArry">
							<div class="c-d-l-wrap pr">
								<div class="c-d-l-desc" style="bottom: -45px;">
									<div class="c-d-l-dbox">
										<section class="hLh30 of txtOf">
											<a class="fsize14 c-fff" :title="item.name" href="javascript:void(0)" @click="routerArticleInfo(item)">{{item.name}}</a>
										</section>
									</div>
								</div>
								<a class="c-d-l-pic" href="javascript:void(0)" @click="routerArticleInfo(item)"> <img v-lazy="domainUrl + item.image"  alt=""> </a>
							</div>
						</li>
						
					</ul>
				</div>
				<div class="clearfix mt10">
					<div class="fl col-75">
						<div class="mr20 mb20">
							<div class="i-box article-wrap">
								<header class="u-header-title clearfix">
									<a id="article_all" href="javascript:void(0)" :class="currentType == 0?'current':''" @click="changeType(0)">全部</a>
									<a id="article_322" href="javascript:void(0)" :class="currentType == item.id?'current':''" v-for="item in typeList" @click="changeType(item.id)">{{item.name}}</a>
								</header>
								<article class="i-article-list ">
									<ul>
										<li v-for="item in articleList">
											<aside class="i-article-pic">
												<img :alt="item.name"  v-lazy="domainUrl + item.image">
											</aside>
											<h3 class="hLh30 txtOf"> 
												<a class="i-art-title" :title="item.name" href="javascript:void(0)" @click="routerArticleInfo(item)">{{item.name}}</a> 
											</h3>
											<section class="hLh30 txtOf mt50 pr10 a-list-extrainfo">
												<div class="fl">
													<span title="浏览数" class="disIb c-999 ml15 vam"> 
														<em class="icon14 q-view mr5"></em> 
														<tt class="vam f-fM">{{item.pageview}}</tt> 
													</span>
													<tt class="c-999 f-fM ml15 vam">{{item.createtime}}</tt>
												</div>
											</section>
										</li>

									</ul>

									<div class="paging">
										<el-pagination background layout="prev, pager, next" :current-page="page.currentPage" :page-count="totalPageSize" :total="totalResultSize"  @current-change="currentChange">
										</el-pagination>
									</div>

								</article>
							</div>
						</div>
					</div>
					<div class="fr col-25">
						<div class="i-box1 mb20">
							<header class="com-title-box">
								<span class="fsize18 c-333">热门资讯</span>
							</header>
							<ul class="ar-rank-list">
								<li v-for="item in hotList">
									<a href="javascript:void(0)" @click="routerArticleInfo(item)" :title="item.name">
										<img class="ar-rank-img" width="90" height="51" v-lazy="domainUrl + item.image" :alt="item.name">
									</a>
									<h6> 
										<a href="javascript:void(0)" @click="routerArticleInfo(item)" :title="item.name">{{item.name}}</a> 
									</h6>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</section>
		</div>
		<foot-bootom></foot-bootom>
	</div>
</template>

<script>
	import headTop from '@/components/header/header'
	import footBootom from '@/components/footer/index'
	import { domainUrl } from '@/utils/index'
	import {getTypeList,getArticleList,getHotList } from '@/api/article.js'
	export default {
		components: {
			//引入组件
			headTop,
			footBootom
		},
		name: 'articlelist',
		data() {
			return {
				currentType:0,
				totalResultSize: 1,
				totalPageSize: 1,
				page: {
					currentPage: 1,
					
				},
				typeList:[],
				articleList: [],
				hotList:[],
				firstArticle:{},
				domainUrl:"",
				topArry:[]
			}
		},
		created(){
			this.getAllArticleList();
			this.getTypeList();
			this.getArticleList(this.page);
			this.getHotList();
			this.domainUrl = domainUrl();
		},
		methods:{
			
			getTypeList(){
				getTypeList().then((res)=>{
					this.typeList = res.entity;
				})
			},
			getArticleList(page){
				getArticleList(page).then((res)=>{
					let entitys = res.entity;
					this.articleList = entitys.data;
					this.totalResultSize = entitys.page.totalResultSize;
					this.totalPageSize = entitys.page.totalPageSize;
					
				})
			},
			getAllArticleList(){//用于显示最上面的资讯
				getArticleList({currentPage: 1}).then((res)=>{
					let entitys = res.entity;
					let length = entitys.data.length;
					this.firstArticle = entitys.data[0];
					if(length>5){
						this.topArry = entitys.data.splice(1,4);
					}else{
						this.topArry = entitys.data.splice(1,length);
						
					}
					
				})
			},
			getHotList(){
				getHotList().then((res)=>{
					this.hotList = res.entity;
				})
			},
			changeType(id){
				this.currentType = id;
				if(id!=0){
					this.page["type"] = id;	
				}else{
					delete this.page.type;
				}
				
				this.getArticleList(this.page);
			},
			currentChange(val){//分页事件
				this.page["currentPage"] = val;
				this.getArticleList(this.page);
			},
			routerArticleInfo(val){//跳转详情
				this.$router.push({
					path: '/articleInfo',
					query: {
						id: val.id
					}
				});
			}
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'article';
</style>